<template>
  <div class="layout">
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <!-- <p>前端开发</p>
            <p>视觉设计</p>
            <p>全栈开发</p>
            <p>人工智能</p>
            <p>系统管理</p> -->

            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="route.path"
              text-color="#fff"
              :router="true"
            >
              <el-menu-item index="/layout/qianduan">
                <span>前端开发</span>
              </el-menu-item>
              <el-menu-item index="/layout/shijue">
                <span>视觉设计</span>
              </el-menu-item>
              <el-menu-item index="/layout/quanzhan">
                <span>全栈开发</span>
              </el-menu-item>
              <el-menu-item index="/layout/rengong">
                <span>人工智能</span>
              </el-menu-item>
              <el-menu-item index="/layout/xitong">
                <span>系统管理</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>


<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>



<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 30px;
  height: 90vh;
  width: 250px;
  // box-sizing: border-box;
}

.el-menu-item {
  justify-content: center;
}

.el-col {
  width: 100%;
}
.el-menu[data-v-3d852729] {
  width: 250px;
  text-align: center;
  height: 90vh;
}

.el-main {
  background-color: #505254;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu {
  width: 180px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>